<template>
  <div class="data-screen">
    <div class="header">
      <div class="title">数据可视化大屏</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 用户统计 -->
        <el-card class="data-card">
          <h3>用户数据分析</h3>
          <div ref="userChartRef" class="chart"></div>
        </el-card>

        <!-- 地区分布 -->
        <el-card class="data-card">
          <h3>用户地区分布</h3>
          <div ref="mapChartRef" class="chart"></div>
        </el-card>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <!-- 核心指标 -->
        <div class="core-data">
          <div v-for="(item, index) in coreData" :key="index" class="data-item">
            <div class="data-value">{{ item.value }}</div>
            <div class="data-label">{{ item.label }}</div>
            <div class="data-trend" :class="item.trend">
              {{ item.rate }}
              <el-icon><CaretTop v-if="item.trend === 'up'" /><CaretBottom v-else /></el-icon>
            </div>
          </div>
        </div>

        <!-- 实时数据流 -->
        <el-card class="data-card">
          <h3>实时交易流水</h3>
          <div class="scroll-list">
            <div class="scroll-container" :style="{ transform: `translateY(${scrollTop}px)` }">
              <div v-for="(item, index) in transactionList" :key="index" class="transaction-item">
                <span class="time">{{ item.time }}</span>
                <span class="content">{{ item.content }}</span>
                <span class="amount">¥{{ item.amount }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 销售排行 -->
        <el-card class="data-card">
          <h3>商品销售排行</h3>
          <div ref="rankChartRef" class="chart"></div>
        </el-card>

        <!-- 系统监控 -->
        <el-card class="data-card">
          <h3>系统实时监控</h3>
          <div class="monitor-data">
            <div v-for="(item, index) in monitorData" :key="index" class="monitor-item">
              <div class="label">{{ item.label }}</div>
              <el-progress
                :percentage="item.value"
                :color="item.color"
                :stroke-width="8"
                :show-text="false"
              />
              <div class="value">{{ item.value }}%</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";

// 当前时间
const currentTime = ref("");
const updateTime = () => {
  currentTime.value = new Date().toLocaleString();
};
let timer: NodeJS.Timer;

// 核心数据
const coreData = ref([
  { label: "总用户数", value: "12,839", trend: "up", rate: "15%" },
  { label: "订单总数", value: "2,341", trend: "up", rate: "12%" },
  { label: "总收入", value: "89,242", trend: "down", rate: "8%" },
  { label: "转化率", value: "68%", trend: "up", rate: "5%" },
]);

// 系统监控数据
const monitorData = ref([
  { label: "CPU使用率", value: 65, color: "#67C23A" },
  { label: "内存使用率", value: 45, color: "#409EFF" },
  { label: "磁盘使用率", value: 88, color: "#E6A23C" },
  { label: "带宽使用率", value: 32, color: "#909399" },
]);

// 交易流水数据
const transactionList = ref([
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:29:57", content: "购买商品B", amount: "499.00" },
  { time: "10:29:31", content: "购买商品C", amount: "799.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  { time: "10:30:24", content: "购买商品A", amount: "1299.00" },
  // ... 更多数据
]);

// 滚动效果
const scrollTop = ref(0);
const scrollStep = -1;
let scrollTimer: NodeJS.Timer;

// 自动滚动
const startScroll = () => {
  scrollTimer = setInterval(() => {
    if (scrollTop.value <= -200) {
      // 根据实际列表高度调整
      scrollTop.value = 0;
    } else {
      scrollTop.value += scrollStep;
    }
  }, 50);
};

// 图表实例
const userChartRef = ref<HTMLElement>();
const mapChartRef = ref<HTMLElement>();
const rankChartRef = ref<HTMLElement>();
let userChart: echarts.ECharts;
let mapChart: echarts.ECharts;
let rankChart: echarts.ECharts;

// 现有变量后添加地图数据
const mapData = [
  { name: "北京", value: 1250 },
  { name: "上海", value: 1800 },
  { name: "广东", value: 2300 },
  { name: "江苏", value: 1600 },
  { name: "浙江", value: 1450 },
  { name: "四川", value: 980 },
  { name: "湖北", value: 850 },
  { name: "福建", value: 760 },
  { name: "山东", value: 1100 },
  { name: "河南", value: 890 },
];

// 替换地图加载方法
const loadMap = async () => {
  try {
    const response = await fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json");
    const json = await response.json();
    echarts.registerMap("china", json);
  } catch (error) {
    console.error("加载地图数据失败:", error);
  }
};

// 初始化用户数据图表
const initUserChart = () => {
  if (!userChartRef.value) return;
  userChart = echarts.init(userChartRef.value);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["新增用户", "活跃用户"],
      textStyle: { color: "#fff" },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      type: "value",
      axisLabel: { color: "#fff" },
    },
    series: [
      {
        name: "新增用户",
        type: "line",
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210],
        areaStyle: {
          opacity: 0.3,
        },
      },
      {
        name: "活跃用户",
        type: "line",
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310],
        areaStyle: {
          opacity: 0.3,
        },
      },
    ],
  };

  userChart.setOption(option);
};

// 添加地图初始化函数
const initMapChart = () => {
  if (!mapChartRef.value) return;
  mapChart = echarts.init(mapChartRef.value);

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 人",
    },
    visualMap: {
      min: 0,
      max: 2500,
      left: "left",
      top: "bottom",
      text: ["高", "低"],
      calculable: true,
      inRange: {
        color: ["#50a3ba", "#eac736", "#d94e5d"],
      },
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "用户分布",
        type: "map",
        map: "china",
        roam: true,
        emphasis: {
          label: {
            show: true,
          },
        },
        data: mapData,
      },
    ],
  };

  mapChart.setOption(option);
};

// 初始化销售排行图表
const initRankChart = () => {
  if (!rankChartRef.value) return;
  rankChart = echarts.init(rankChartRef.value);

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      type: "category",
      data: ["商品A", "商品B", "商品C", "商品D", "商品E"],
      axisLabel: { color: "#fff" },
    },
    series: [
      {
        name: "销售额",
        type: "bar",
        data: [320, 302, 301, 334, 390],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
      },
    ],
  };

  rankChart.setOption(option);
};

// 监听窗口大小变化
const handleResize = () => {
  userChart?.resize();
  mapChart?.resize();
  rankChart?.resize();
};

// 修改 onMounted
onMounted(async () => {
  updateTime();
  timer = setInterval(updateTime, 1000);

  await loadMap(); // 等待地图加载完成

  initUserChart();
  initMapChart();
  initRankChart();
  startScroll();

  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  clearInterval(timer);
  clearInterval(scrollTimer);
  window.removeEventListener("resize", handleResize);

  userChart?.dispose();
  mapChart?.dispose();
  rankChart?.dispose();
});
</script>

<style scoped>
.data-screen {
  width: 100%;
  height: 100vh;
  background: #0f1527;
  color: #fff;
  overflow: hidden;
}

.header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.05);
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.time {
  font-size: 16px;
}

.content {
  display: flex;
  padding: 20px;
  height: calc(100vh - 60px);
  gap: 20px;
}

.left-panel,
.right-panel {
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.data-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  backdrop-filter: blur(10px);
  height: 100%;
}

:deep(.el-card__body) {
  padding: 15px !important;
}

.chart {
  height: 360px;
}

.core-data {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.data-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 4px;
  text-align: center;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.data-label {
  color: #909399;
  margin-bottom: 8px;
}

.data-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.up {
  color: #67c23a;
}

.down {
  color: #f56c6c;
}

.scroll-list {
  height: 200px;
  overflow: hidden;
}

.scroll-container {
  transition: transform 0.5s linear;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.monitor-data {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.monitor-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monitor-item .label {
  width: 100px;
}

.monitor-item .value {
  width: 50px;
  text-align: right;
}

:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

h3 {
  margin: 0 0 15px;
  font-size: 16px;
  color: #fff;
}

:deep(.map-chart) {
  .echarts-tooltip {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
  }
}
</style>
